<template>
  <div class="box">
    <div class="top">鸡场总览</div>
    <table>
      <tr style="background: #188d9f; height: 40px; border-bottom: 1px solid #a78d41; color: yellow; font-weight: bold; font-size: 16px">
        <th>鸡舍名称</th>
        <th>状态</th>
        <th>存栏</th>
        <th>品种</th>
        <th>日龄</th>
      </tr>
      <tr @click="gohenh" v-for="(item, index) in data" :key="index" style="border-bottom: 1px dashed #a78d41; color: yellow; height: 38px;">
        <th>{{ item.name }}</th>
        <th>{{ item.status }}</th>
        <th>{{ item.keep }}</th>
        <th>{{ item.wash }}</th>
        <th>{{ item.give }}</th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
const data = [
  {
    name:'B1号舍',
    status:"在线",
    keep:'40000',
    wash:'农金1号',
    give:'66'
  },
  {
    name:'B2号舍',
    status:"在线",
    keep:'40000',
    wash:'农金1号',
    give:'66'
  },
  {
    name:'B3号舍',
    status:"在线",
    keep:'40000',
    wash:'农金1号',
    give:'66'
  },
]

const gohenh = (item: any) => {
  console.log(item);
  window.location.href = '/henhouse'
}


</script>

<style scoped>
.box {
    width: 90%;
    width: 100%;
}

.top {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #2af7f6;
    padding-top: 1vh;
}

.box table {
  width: 80%;
  /* height: 16vh; */
  margin-left: 4vw;
  margin-top: 1vh;
  text-align: center;
  border-collapse: collapse;
  font-size: 14px;
  border: none;
}

</style>